<template>
  <el-table
    ref="listTableRef"
    :data="state.listTableData"
    v-loading="state.listLoading"
    row-key="id"
    :border="true"
    :show-header="showHeader"
    :max-height="windowHeight - 150 - defaultHeight"
    @row-dblclick="rowDbClickHandler"
  >
    <template v-for="(item, index) in columnConfigs.headers">
      <el-table-column
        :prop="item.columnName"
        :label="item.columnLabel"
        :sortable="item.sortable"
        :column-key="item.columnKey"
        :min-width="item.minWidth"
        :width="item.width"
        :align="item.align"
        show-overflow-tooltip
      >
        <template v-if="item.custom" #default="scope">
          <slot :name="item.columnName" :index="index" :scope="scope" />
        </template>
      </el-table-column>
    </template>
    <el-table-column :width="operateWidth" label="操作">
      <template #default="scope">
        <el-button
          class="text_warn"
          text
          v-if="scope.row[compareItem] === checkItemId && checkItemId != ''"
          @click="removeHandler(scope.row)"
          >取消选择</el-button
        >
        <el-button
          class="text_primary"
          text
          v-else
          @click="checkHandler(scope.row)"
          >选择</el-button
        >
        <slot name="otherOperateBtns" :scope="scope"></slot>
      </template>
    </el-table-column>
  </el-table>
  <div class="page">
      <el-pagination
        v-model:current-page="state.pageNumber"
        v-model:page-size="state.pageSize"
        :page-sizes="columnConfigs.pageSizes"
        layout="total, sizes, prev, pager, next"
        :total="total"
        background
        size="small"
        @size-change="sizeChangeHandler"
        @current-change="currentChangeHandler"
      />
  </div>
</template>
<script setup lang="ts">
import { reactive, ref, watch } from "vue";
import { ElTable } from "element-plus";
import { useApp } from "../../pinia/modules/app";
import { storeToRefs } from "pinia";
const { windowHeight } = storeToRefs(useApp());
const emit = defineEmits([
  "pushCurrentChange",
  "pushSizeChange",
  "pushCheck",
  "pushRemove",
]);

const props = defineProps({
  listData: {
    type: Array,
    default() {
      return [];
    },
  },
  compareItem: {
    type: String,
    default: "id",
  },
  checkItemId: {
    type: String,
    default: "",
  },
  showHeader: {
    type: Boolean,
    default: true,
  },
  loading: {
    type: Boolean,
    default: false,
  },
  columnConfigs: {
    type: Object,
    default() {
      return {};
    },
  },
  defaultHeight: {
    type: Number,
    default: 0,
  },
  operateWidth: {
    type: Number,
    default: 80,
  },
  currentPage: {
    type: Number,
    default: 1,
  },
  maxPageSize: {
    type: Number,
    default: 20,
  },
  total: {
    type: Number,
    default: 1,
  },
});
// 初始化数据
let state = reactive({
  listTableData: props.listData,
  listLoading: props.loading,
  pageNumber: props.currentPage,
  pageSize: props.maxPageSize,
});
// 监听数据变化
watch(
  () => props.listData,
  (val) => {
    state.listTableData = val;
  },
  { deep: true }
);
watch(
  () => props.loading,
  (val) => {
    state.listLoading = val;
  },
  { deep: true }
);
const listTableRef = ref<InstanceType<typeof ElTable>>();
const removeHandler = (item: any) => {
  item.selected = false;
  emit("pushRemove",item);
};
const checkHandler = (item: any) => {
  item.selected = true;
  emit("pushCheck", item);
};

const rowDbClickHandler = (item: any) => {
  if (item[props.compareItem] === props.checkItemId) {
    emit("pushRemove");
    return;
  }
  emit("pushCheck", item);
};

const sizeChangeHandler = (val: Number) => {
  state.pageNumber = 1;
  emit("pushSizeChange", val);
};
const currentChangeHandler = (val: Number) => {
  emit("pushCurrentChange", val);
};
</script>
